<template>
  <main>
    <div id="container">
      <!-- 左边标语 -->
      <div id="c-1">
        <p style="font-size: 60px;font-weight: 500;">高收入&nbsp;&nbsp;好平台&nbsp;&nbsp;新机遇</p>
        <p style="font-size: 32px;">来这里,你值得更好的</p>
        <img style="height: 430px;" src="../../assets/img/content1.png" alt />
      </div>
      <!-- 登录界面 -->
      <div id="c-2">
        <button :class="[ bottom?'bt1':'bt2' ]">我要登录</button>
        <button :class="[ bottom?'bt2':'bt1' ]" @click="toRegister()">我要入驻</button>

        <br />
        <br />

        <div id="msg">
          <input
              v-model="user.userName"
              :placeholder="userPlace"
              id="userName"
              name="userName"
              type="text"
          />
          <input v-model="user.passWord" :placeholder="passPlace" style="margin-top: 30px" name="pwd" type="password" />



          <br>
          <br><br>
          <div id="remember">
            <span id="forget" @click="$router.push('rePwd')">忘记密码?</span>
          </div>

          <br>
<!--          滑动验证码-->
          <div v-if="captchaShow==1" id="captcha">
            <div style="display: flex;justify-content: space-around;width: 100%">
              <h4>请滑动到正确位置</h4><i @click="captchaShow=false" style="cursor: pointer" class="el-icon-error">关闭</i>
            </div>

<!--            <slide-verify :l="42"-->
<!--                          :r="10"-->
<!--                          :w="220"-->
<!--                          :h="155"-->
<!--                          slider-text="向右滑动"-->
<!--                          @success="onSuccess"-->
<!--                          @fail="onFail"-->
<!--                          @refresh="onRefresh"-->
<!--                          :imgs="['https://source.unsplash.com/400x300/?company']"-->
<!--            ></slide-verify>-->
            <drag-verify-img-chip
                ref="dragVerify"
                :imgsrc="require('@/assets/img/study.jpg')"
                :isPassing.sync="yanzheng"
                handlerIcon="fa fa-angle-double-right"
                successIcon="fa fa-check-circle-o"
                @passcallback="onSuccess"
                @refresh="onRefresh"
            >
            </drag-verify-img-chip>
            <p style="font-size: 13px">{{msg}}</p>
          </div>
          <div v-if="captchaImgShow" style="display: flex;justify-content: space-between;align-items: center">
            <captcha ref="captcha" :uuid="uuid"></captcha>
            <input
                style="width: 150px;margin: 0"
                v-model="captcha"
                placeholder="输入验证码"
                name="captcha"
                type="text"
            />
          </div>



          <button @click="login()" id="loginBt">登录<i v-if="loading" class="el-icon-loading"></i></button>
        </div>
      </div>
    </div>
  </main>
</template>


<script>
import dragVerifyImgChip from 'vue-drag-verify-img-chip'
import slideVerify from "@/components/conmmon/slideVerify";
import {getUuid, login} from "@/api/main";
import Captcha from "@/components/conmmon/Captcha";

export default {
  name: "App",
  components: {
    Captcha,
    slideVerify,
    dragVerifyImgChip
  },
  data() {
    return {
      checked:false,
      loading:false,
      uuid:'',
      user: {
        userName: "", //用户名
        passWord: "" //密码
      },
      yanzheng:false,
      token:'',
      userPlace: "输入用户名",
      passPlace: "输入密码",
      submitTxt: "登录",
      bottom: false,
      register: false,
      msg:'',
      captchaShow:false,
      captchaImgShow:false,
      captcha:''
    };
  },
  methods: {
    getToken(){       //进入页面向服务器请求一个唯一值登入时提交

    },
    onSuccess(){
      this.msg = '验证通过~你的手速比99%的人都快'
      this.$message.success("请输入验证码~")
      this.captchaShow=2
      //拿到唯一uuid
      getUuid().then(res=>{
        this.uuid=res.data
        this.captchaImgShow=true
      })

      // this.$router.push("/home")
    },
    onFail(){
      this.msg = '您滑动的不对呢~'
    },
    onRefresh(){
      this.msg = ''
    },
    login() {
      if (!this.user.userName) {
        this.$message.error("用户名不能为空!")
      } else if (!this.user.passWord) {
        this.$message.error("请填写密码~")
      }else {
        // this.loading=true
        if(this.captchaShow==2){
          const useInfo={
            userName:this.user.userName,
            passWord: this.user.passWord,
            captcha:this.captcha,
            uuid:this.uuid
          }
          //登录
          this.$store.dispatch("user/login",useInfo)
          setTimeout(()=>{
            this.$refs.captcha.refresh()
          },200)

        }else {
          this.captchaShow=1
        }
      }
    },
    toLogin() {
      this.bottom = false;
    },
    toRegister() {
      this.bottom=true
      this.register = true;
      this.$router.push("register")
    },
  }
};
</script>

<style lang="stylus" scoped>
color=rgb(187,187,187)
*
  padding 0
  margin 0
main
  width 100%
  height 93vh
  display flex
  justify-content center
#container
  width 80%
  display flex
  justify-content space-between
  box-sizing border-box
  padding 60px 0
#c-2
  position relative
  width 388px
  height 480px
  padding 60px
  box-sizing border-box
  background-color #fff
  box-shadow 0px 0px 16px rgb(180, 166, 166)
  & input
    border none
    background-color #fff
    width 100%
    height 40px
    margin-top 30px
    outline none
    border-bottom 0.5px rgb(216, 204, 204) solid
.bt1
  width 48%
  background-color #fff
  border none
  outline none
  cursor pointer
  font-size 20px
  color rgb(184, 177, 166)


.bt2
  width 48%
  background-color #fff
  border none
  outline none
  cursor pointer
  font-size 20px
  border-bottom orange 2px solid
  color black

#loginBt
  margin-top 25px
  width 103%
  height 40px
  background-color rgb(255, 102, 68)
  border none
  outline none
  color white
  cursor pointer


#forget
  color blue
  font-size 14px
  cursor pointer

#captcha
  z-index 3
  width 72%
  height 70%
  background #edf392
  box-shadow 0 0 2px black
  position absolute
  top 100px
  display flex
  flex-direction column
  align-items center
  justify-content center
#remember
  display flex
  justify-content space-between
  &>p
    font-size 13px
    color color
</style>
